<template>
    <div>
        <div class="m-imagesList" v-if="list.length" v-for="(item,index) in list" :key="'upload' + index" :style="{'margin-left':index == 0?'0':'10px'}">
            <el-image
                style="width:100%; height:100%; display:inline-block; border-radius:6px;"
                :src="item"
                fit="cover"
            >
            </el-image>
            <div class="close" @click="remove(index)">
                <i class="el-icon-close"></i>
            </div>
        </div>

        <el-upload
            v-if="list.length < (limit?limit:1)"
            :style="{'margin-left':list.length?'10px':'0px','display':'inline-block', 'vertical-align':'middle' }"
            :action="alHost"
            :limit="limit?limit:1"
            :show-file-list="false"
            list-type="picture-card"
            :before-upload = "handleBefore"
            :on-success = "handleSuccess"
            :multiple="false"
            :data="oss"
            >
            <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>

<script>
import HOST from '../../utils/host.js'
export default {
    props:['limit','list'],
    // props:{
    //     limit:Number,
    //     fileList:{
    //         type:'Array',
    //         default: () => []
    //     }
    // },
    name:'imageUpload',
    data(){
        return {
            host:HOST + '/admin/oss',

            //图片相关
            oss:{},
            alHost:'/',
            fileList:[]
        }
    },
    created(){
        const vm = this;
        // let _list = vm.list?vm.list:[]
        // for(let i = 0; i < vm.list.length; i++){
        //     vm.fileList.push(vm.list[i])
        // }
    },
    activated(){

    },
    methods:{
        /*******图片相关*******/
        handleSuccess(response, file, fileList){
            const vm = this;
            let oss = vm.oss
            let _url = vm.alHost + '/' + vm.key
            //console.log(_url)
            vm.list.push(_url)
            // return false
            // let key = oss.key + vm.randomString(10) + vm.getSuffix(file.name)
            // const postData = {
            //     key:key,
            //     policy:oss.policy,
            //     OSSAccessKeyId:oss.OSSAccessKeyId,
            //     success_action_status : '200', //让服务端返回200,不然，默认会返回204,
            //     //callback : function(){},
            //     signature: oss.signature,
            //     file : file.raw
            // }
            // const formData = new FormData()
            // Object.keys(postData).forEach(key=>{
            //     formData.append(key,postData[key])
            // })

            // vm.$axios.upload(oss.host,formData)
            // .then((res) => {
            //     let _url = oss.host + '/' + key
            //     vm.list.push(_url)
            // })
        },
        async handleBefore(file){
            const vm = this;
            let oss = {}
            let alHost = "/"
            let key = ''
            await vm.$axios.get(api.upload)
            .then((res) => {
                let _obj = res
                key = _obj.key + vm.randomString(10) + vm.getSuffix(file.name)
                oss = {
                    key:key,
                    policy:_obj.policy,
                    OSSAccessKeyId:_obj.OSSAccessKeyId,
                    success_action_status : '200', //让服务端返回200,不然，默认会返回204,
                    //callback : function(){},
                    signature: _obj.signature,
                    //file : file.raw
                }
                alHost = _obj.host
            })
            .catch((res) => {
                console.log(res)
            })
            //console.log(oss)
            vm.oss = oss
            vm.alHost = alHost
            vm.key = key
        },

        //随机生成10位
        randomString(len){
        　　len = len || 32;
        　　var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';   
        　　var maxPos = chars.length;
        　　var pwd = '';
        　　for (let i = 0; i < len; i++) {
            　　pwd += chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },

        //获取文件后缀
        getSuffix(filename){
            let pos = filename.lastIndexOf('.')
            let suffix = ''
            if (pos != -1) {
                suffix = filename.substring(pos)
            }
            return suffix;
        },
        /*******图片相关 end*******/


        /****图片操作*****/
        //移除图片
        remove(index){
            const vm = this;
            vm.list.splice(index,1)
        }
    }   //method
}
</script>

<style scoped>
.m-imagesList{
    width: 148px;
    height: 148px;
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    position: relative;
    z-index: 1;
}

.m-imagesList .close{
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    background-color: #fff;
    right: -10px;
    top: -10px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);
}
</style>

